<template>
	<view :class="[config.style]">
		<view class="muu-navbar" >
			<view class="item" :class="key == pageIndex?'active':''" v-for="(item,key) in config.footer.data" :key="key" v-bind:type="item.link.type" @click="item.link.type == 'tominiprogram'? toMiniprogram(item.link):util.goToLink(item.link, key)">
				<image :mode="item.mode" :src="item.icon_url" class="image"></image>
				<text class="title">{{item.nav_title}}</text>
			</view>
		</view>
		
		<!-- h5端弹出小程序码 -->
		<uni-popup ref="openQrcode" type="center">
			<view class="open-qrcode">
				<!--小程序二维码-->
				<view class="content">
					<view class="title">扫描进入小程序</view>
					<view v-if="qrcodeUrl">
						<image class="image" :src="qrcodeUrl" mode="widthFix"></image>
					</view>
					<view v-else>
						加载中...
					</view>
				</view>
				<view class="close-icon" @click="closeQrcode()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

	export default {
		props: {

		},
		data() {
			return {
				config: this.$store.state.minishop.config,
				pageIndex: this.$store.state.pageIndex,
				qrcodeUrl: ''
			}
		},
		created() {
			
		},

		methods: {
			
			/**
			 * 跳转小程序
			 * @param {Object} link
			 */
			toMiniprogram(link) {
				let that = this
				let params = link.param
				
				// 请求数据
				let url = 'entry/site/tominiprogram'
				//#ifdef MP-WEIXIN
				url = 'entry/wxapp/tominiprogram'
				//#endif
				//#ifdef H5
				url = 'entry/site/tominiprogram'
				//#endif
				// 获取数据
				this.util.request({
					url : url,
					data : {
						action: 'detail',
						id: params.id
					},
					success: function (res) {
						if (res.data.code == 200) {
							// #ifdef MP-WEIXIN
							wx.navigateToMiniProgram({
								appId: res.data.data.appid,
							})
							// #endif
							// #ifdef H5
							that.qrcodeUrl = res.data.data.qrcode_400
							console.log(that.cdnUrl)
							that.showQrcode()
							// #endif
						}
					}
				})
			},
			
			/**
			 * 弹出小程序二维码
			 * @param {Object} id
			 */
			showQrcode: function(data){
				this.$refs.openQrcode.open()
			},
			
			/**
			 * 关闭小程序二维码
			 */
			closeQrcode: function(){
				this.$refs.openQrcode.close()
			},
		}
	}
</script>

<style lang="scss">
	.muu-navbar {
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		table-layout: fixed;
		background-color: #ffffff;
		text-align: center;
		display: table;
		border-top:2rpx solid #f4f6f7!important;
		padding-top: 10rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		z-index: 98;
		
		.item {
			display: table-cell;
			position: relative;
			width: 1%;
			height: 2.5rem;
			text-align: center;
			vertical-align: middle;
			.iconfont {
				position: relative;
				z-index: 20;
				top: 0.1rem;
				height: 1.2rem;
				font-size: 1rem;
				line-height: 1rem;
			}
			.image {
				display:block;
				padding:0;
				width: 52rpx;
				height: 52rpx;
				margin:0 auto;
			}
			.title {
				font-size: 24rpx;
				color: #666;
				line-height: 36rpx;
			}
		}
		.item.active {
			.title {
				color: #03b8cf;
				font-weight: 600;
			}
		}
	}
	
	.open-qrcode {
		
		.content {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			width: 480rpx;
			padding: 20rpx;
			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 52rpx;
			}
			.image {
				max-width: 100%;
			}
		}
		.close-icon {
			padding-top: 32rpx;
			text-align: center;
			color: #fff;
			.iconfont {
				font-size: 64rpx;
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.muu-navbar {
			.item.active {
				.title {
					color: $Blue;
				}
			}
		}
	}
	.Green {
		.muu-navbar {
			.item.active {
				.title {
					color: $Green;
				}
			}
		}
	}
	.LightRed {
		.muu-navbar {
			.item.active {
				.title {
					color: $LightRed;
				}
			}
		}
	}
	.Orange {
		.muu-navbar {
			.item.active {
				.title {
					color: $Orange;
				}
			}
		}
	}
	.LightPink {
		.muu-navbar {
			.item.active {
				.title {
					color: $LightPink;
				}
			}
		}
	}
	.Magenta {
		.muu-navbar {
			.item.active {
				.title {
					color: $Magenta;
				}
			}
		}
	}
</style>
